<template>
    <div>
		<div v-for="(item,index) in list" :key = "index">
			<div class="storage">
				{{item.name}}
			</div>
			<div v-for="(item1,index1) in item.positionList" :key="index1" style="margin-top: 20px;">
				<div class="freightSpace" style="color:black;">{{item1.name}}</div>
				<div class="freightSpace" v-show="item1.type == 1">气调仓</div>
				<div class="freightSpace" v-show="item1.type == 2">干仓</div>
				<div class="freightSpace">{{item1.volume}}</div>
				<!-- <div>{{item1.shelvesList[0].name}}</div> -->
				<div>
					<div v-for="(item2,index2) in item1.shelvesList" :key="index2" class="goodsShelfContent">
							<div style="height:30px;border-bottom: 1px solid #666;line-height:30px;text-align: right;">

								<div v-if="item2.state == '出库'" style="display:inline-block;font-size:15px;;margin-right:15px;cursor:pointer" @click="edit(item2)">编辑</div>
								<div v-if="item2.state == '入库'" style="display:inline-block;font-size:15px;;margin-right:15px; cursor:pointer" @click="putInstorage(item2)">入库</div>
							</div>

							<img :src="$store.state.plantImg + item2.img" alt="" style="width: 80px; height:80px;border: 1px solid #33CCFF;border-radius: 5px;margin-left:10px;display:inline-block;margin-top: 10px;">

						<div v-if="item2.state == '入库'" style="display: inline-block;font-size: 12px;margin-left: 10px; margin-top:20px;width:80px;overflow: hidden;">
							<div class="height_1">货物名称：无</div>
							<div class="height_1">存货量：0</div>
							<div class="height_1">货主名称：/</div>
							<div class="height_1">存货类型：/</div>

						</div>
						<div v-if="item2.state == '出库'" style="display: inline-block;font-size: 12px;margin-left: 10px; margin-top:20px;width: 80px;overflow: hidden;">
							<div class="height_1">货物名称：{{item2.goods.goodsName}}</div>
							<div class="height_1">存货量：{{item2.goods.goodsNum}}kg</div>
							<div class="height_1">货主名称：{{item2.goods.ownerName}}</div>
							<div class="height_1" v-if="item2.goods.type == 1">存货类型：存放</div>
							<div class="height_1" v-if="item2.goods.type == 2">存货类型：<div style="display: inline-block;color: red;">抵押</div></div>
						</div>
					</div>
				</div>

			</div>
		</div>

    </div>
</template>

<script scope="scoped">

import axios from "axios"
export default {
    data() {
        return {
            type:1,
			list:[]
        };
    },
    created() {},
    mounted() {
        this.init();

    },
    methods: {
		putInstorage(e){
			this.$router.push({
			    path: '/mstorage/add',
			    query: {
			        id: e.id,
			    }
			});
		},
		edit(e){
			this.$router.push({
			    path: '/mstorage/edit',
			    query: {
			        id: e.id,
			    }
			});
		},
		leave(e){
			this.$router.push({
			    path: '/mstorage/leave',
			    query: {
			        id: e.id,
			    }
			});
		},
        init() {
			let data = {
				type:this.type,
				storeHouseName:'',
				positionName:''
			}
			axios.post("http://grove.cpzsyun.com:81/api/control/storeHouse/findChild",data).then((res)=>{
				// console.log(res.data)
				this.list = res.data.data
			})
        },
    }
};
</script>

<style scoped lang="less">
/deep/.upload-daoru {
    background: #eee;
    .el-upload {
        border: none;
        width: auto;
        height: auto;
        border-radius: 0;
        float: right;
        margin-right: 10px;

    }
}
/* .el-row{ margin-bottom: 20px;} */
.el-pagination {
    text-align: center;
}
/* .el-select .el-input {
width: 130px;
} */
.input-with-select .el-input-group__prepend {
    background-color: #fff;
}
.el-input--small .el-input__inner {
    border-radius: 5px 0 0 5px !important;
    /* border-right: none; */
}
.el-col {
    margin-bottom: 0;
}
.storage{
	margin: 20px;
	width:150px;
	height:50px;
	line-height:50px;
	background: #fff;
	text-align: center;
	font-weight: 600;
}
.freightSpace{
	margin-left:20px;
	display:inline-block;
	color:#AAAAAA;
}
.goodsShelfContent{display:inline-block;
	width:200px;
	height:150px;
	border-radius: 10px;
	background:#fff;

	margin:20px 0px 0px 20px;
	// padding:10px;
}
.height_1{
	height:20px;
	line-height:20px;
	// white-space:nowarp;
	white-space: nowrap;
}
</style>
